<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html>
<head>
	<!-- Basic Page Needs -->
	<meta charset="utf-8">
	<title>排行榜</title>
	<meta name="description" content="A Template by Gozha.net">
	<meta name="keywords" content="HTML, CSS, JavaScript">
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
	<meta name="author" content="Gozha.net">
	
	<!-- Mobile Specific Metas-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta content="telephone=no" name="format-detection">
	
	<!-- Fonts -->
	<!-- Font awesome - icon font -->
	<link
		href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
		rel="stylesheet">
	<!-- Roboto -->
	<link href='http://fonts.useso.com/css?family=Roboto:400,700'
		rel='stylesheet' type='text/css'>
	<!-- layui -->
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
	<!-- Stylesheets -->
	
	<!-- Mobile menu -->
	<link href="css/gozha-nav.css" rel="stylesheet" />
	<!-- Select -->
	<link href="css/external/jquery.selectbox.css" rel="stylesheet" />
	
	<link href="css/style-before.css?v=1" rel="stylesheet" />
	<!-- Custom -->
	<link href="css/style.css?v=1" rel="stylesheet" />
	
	<!-- Modernizr -->
	<script src="js/external/modernizr.custom.js"></script>
	<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
	<script type="text/javascript" src="js/jquerysession.js"></script>

</head>

<body>
	<div class="wrapper">
		<jsp:include page="header.jsp"></jsp:include>

		<div style="height: 70px;"></div>

		<!-- Main content -->
		<section class="container">
			<div class="col-sm-12">
				<div class="row">
					<div class="col-sm-8 col-md-9">
						<h2 class="page-heading">收藏榜</h2>

						<div class="rates-wrapper">
							<input type="text" id="page" name="page" value="" hidden="">

							<table>
								<colgroup class="col-width-lg">
								<colgroup class="col-width">
								<colgroup class="col-width-sm">
								<colgroup class="col-width">
								<tbody id="demo"></tbody>
							</table>
							<div id="pagediv" style="text-align: center;"></div>
						</div>

						<div class="pagination paginatioon--full coloum-wrapper">
							<div id="pagediv" style="text-align: center;"></div>
						</div>
					</div>

					<aside class="col-sm-4 col-md-3">
						<div class="sitebar hidden-xs">
							<div class="banner-wrap">
								<img alt='banner'
									src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592459548014&di=9b53b7c4977ff7dfdbdee7aedb7c95ec&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20121002%2F20121002123850-258830587.jpg">
							</div>

							<div class="banner-wrap">
								<img alt='banner'
									src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592408426926&di=85d7f1a88c69f5649575a2f70110198c&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1733294988%2C2377049170%26fm%3D193">
							</div>

							<div class="banner-wrap">
								<img alt='banner'
									src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592408426925&di=50bc97157e837a5046312ac035b7d813&imgtype=0&src=http%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D2809833415%2C3155966607%26fm%3D193">
							</div>

							<div class="banner-wrap">
								<img alt='banner'
									src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1098244272,422021739&fm=26&gp=0.jpg">
							</div>

							<div class="banner-wrap banner-wrap--last">
								<img alt='banner'
									src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592408426927&di=4f11ca56daf0f6eb6c2d22805f2deecc&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D3936688377%2C3225924061%26fm%3D193">
							</div>
						</div>
					</aside>
				</div>
			</div>
		</section>

		<div class="clearfix"></div>
		<jsp:include page="footer.jsp"></jsp:include>
	</div>
	
	<jsp:include page="LoginAndRegister.jsp"></jsp:include>

	<!-- JavaScript-->
	<!-- jQuery 1.9.1-->
	<script type="text/javascript" src="js/jquery-2.0.3.js" charset="utf-8"></script>
	<script
		src="http://ajax.useso.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script>
		window.jQuery || document.write('<script src="js/external/jquery-1.10.1.min.js"><\/script>')
	</script>
	<!-- Migrate -->
	<script src="js/external/jquery-migrate-1.2.1.min.js"></script>
	<!-- Bootstrap 3-->
	<script
		src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

	<!-- Mobile menu -->
	<script src="js/jquery.mobile.menu.js"></script>
	<!-- Select -->
	<script src="js/external/jquery.selectbox-0.2.min.js"></script>
	<!-- Stars rate -->
	<script src="js/external/jquery.raty.js"></script>
	<!-- jQuery REVOLUTION Slider -->
	<script type="text/javascript"
		src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
	<script type="text/javascript"
		src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
	<!-- Form element -->
	<script src="js/external/form-element.js"></script>
	<!-- Form validation -->
	<script src="js/form.js"></script>

	<!-- Custom -->
	<script src="js/custom.js"></script>
	<script src="js/customf.js"></script>
	<script type="text/javascript" src="js/jquery.cookie.js"></script> 

	<script type="text/javascript">
		$(document).ready(function() {
			init_Rates();
		});
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			init_Home();
		});
	</script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script>
		getList();
		function getList() {
			var page1 = $("#page").val();
			
			$.ajax({
				type : "post",
				url : "gcl",
				dataType : "json",
				data : {
					page : page1
					/* limit : "20" */
				},
				success : show
			});
		}

		function show(data) {
			var str = "";
			var page = data.page;
			var count = data.count;
			$("#count").val(count);
			$("#demo").text("");
			
			for (i = 0; i < data.data.length; i++) {
				console.log(data.data[i].movies.movieid);
				console.log(data.data[i].movies.moviename);
				str += "<tr class='rates rates--top'><td class='rates__obj'>"
						+ "<a href='#' class='rates__obj-name'>" + (i + 1)
						+ "." + data.data[i].movies.moviename + "</a></td>"
						+ "<td class='rates__vote'>" + data.data[i].count
						+ "人想看" + "</td>" + "</tr>"
			}
			$("#demo").append(str);
			FY(count, page);
		}

		function FY(count, page) {
			layui.use([ 'laypage', 'layer' ], function() {
				var laypage = layui.laypage, layer = layui.layer;
				//完整功能
				var page = $("#page").val();
				laypage.render({
					elem : 'pagediv',
					count : count,
					curr : page,
					limit : 20,
					theme : "#ffd564",
					layout : [ 'count', 'prev', 'page', 'next', 'skip' ],
					jump : function(obj, first) {
						//obj包含了当前分页的所有参数，比如：
						console.log("page11:" + obj.curr);
						$("#page").val(obj.curr);
						if (!first) {
							//do something
							getList();
						}
					}
				});
			});
		}
	</script>

	<jsp:include page="JudegeLogin.jsp"></jsp:include>



</body>
</html>
